<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<!-- <script src="../js/bootstrap/css/bootstrap-theme.min.css"></script> -->
<link rel="stylesheet" type="text/css" href="../mycss/style.css" />
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../laypage/laypage.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<title>Insert title here</title>
</head>
<body id="tablePage">
<div>
 <blockquote>
服务分配
		</blockquote>
		<hr/>	 	
<!-- *******************************************************************************抬头泛查询表单****************************************************************************************************************** -->
<form class="form-horizontal row" id="selectF">
<label class="control-label col-xs-2"  style="width:14%" for="formGroupInputsmall">服务名称</label>
  <div class="col-xs-2">
    <input type="text" class="form-control" name="serviceName" value=''>
  </div>
 <label class="col-xs-1 control-label"  for="formGroupInputsmall">类型</label>
  <div class="col-xs-2">
  <select class="form-control" name="serviceType" id="typeM">
    				<option value=''>不限</option>
			      <option>咨询服务</option>
			      <option>投诉服务</option>
			      <option>售前服务</option>
			      <option>售后服务</option>
				  </select> 
  </div>
  <label class="col-xs-1 control-label" for="formGroupInputsmall">状态</label> 
  <div class="col-xs-2">
    <select class="form-control" name="state" id="stateM">
   				<option value=''>不限</option>
			      <option>新创建</option>
			      <option>已提交</option>
			      <option>已分配</option>
			      <option>已处理</option>
			      <option>已反馈</option>
			      <option>已归档</option>
				  </select>
			  
  </div>
 <button type="button" class="btn btn-primary col-xs-1" id="selectA">查询</button> 
<!--  <button type="button" class="btn btn-primary col-xs-1 insertB" data-toggle="modal" data-target="#insertM">添加</button> -->
</form>	
<div class="tableDiv">
		<table id="conTable" class="table table-bordered" >
			<tr class="info"><td></td><td></td><td>服务名称</td><td>类型</td><td>状态</td><td>操作时间</td><td>操作人</td><td>待处理人（司）</td><td>操作</td></tr>
			<tr class="active" v-for="item in home"><td></td><td><input type="radio" name="radio" /></td><td>{{item.serviceName}}</td><td>{{item.serviceType}}</td><td>{{item.state}}</td><td>{{item.createTime}}</td><td>{{item.heyunEmp1.empRealName}}</td><td>{{item.heyunEmp2.empRealName}}</td>
			<td>
			
			<input v-if="item.state!='已归档'" class="btn btn-primary btn-xs active updateB" :update_id="item.serviceId" type="button" value="修改" data-toggle="modal" data-target="#updateM">&nbsp;&nbsp;
			     <input v-if="item.state=='新创建'" class="btn btn-danger btn-xs active delB" type="button"  :del_id="item.serviceId" value="删除" data-toggle="modal" data-target="#delM">&nbsp;&nbsp;
			     <input v-if="item.state!='已归档'" class="btn btn-info btn-xs active getB" type="button"  :get_id="item.serviceId" value="查看" data-toggle="modal" data-target="#getM">&nbsp;&nbsp;
			     <input v-if="item.state=='新创建'" class="btn btn-warning btn-xs active submitB" type="button"   :submit_id="item.serviceId" value="提交" data-toggle="modal" data-target="#submitM">&nbsp;&nbsp;</td></tr>
			     <tr >
			      <td id="clear" colspan="9"></td>
			      </tr>
		</table>	
	</div>
	<!--**********************************************************************************************分配的模态框，兼具查看和动态分配(通更新故采为MU(pdate))***************************************************************************************************-->
	<div class="modal fade" id="updateM" tabindex="-1" role="dialog">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">分配</h4>
	      </div>
	      <div class="modal-body">
			<ul class="list-group">
				<li class="list-group-item" id="serviceNameMU">服务名称：</li>
				<li class="list-group-item" id="serviceTypeMU">服务类型：</li>
				<li class="list-group-item" id="cusNameMU">服务客户：</li>
				<li class="list-group-item" id="cusTelMU">联系电话：</li>
				<li class="list-group-item" id="serviceContentMU">服务内容：</li>
				<li class="list-group-item" id="remarksMU">备注：</li>
				</ul>
			  <!--  -->
			  <form class="form-horizontal">
			  	<div class="form-group">
			    <label class="col-sm-3 control-label">选择处理人</label>
			    <div class="col-sm-5">
			     <select class="form-control" name="heyunEmp3.empId" id="empRealNameMU">
			      <option v-for="item in emp" :value="item.empId">{{item.empRealName}}</option>			      
				  </select>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  </form>	
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="updateMB">更新</button>
	      </div>
	    </div>
	  </div>
	</div>
	<!--*************************************************************************************查看的模态框*********************************************************************************************************-->
 <div class="modal fade" id="getM" tabindex="-1" role="dialog">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">查看</h4>
	      </div>
	      <div class="modal-body">
	      <ul class="list-group">
				<li class="list-group-item" id="serviceNameMG">服务名称：</li>
				<li class="list-group-item" id="serviceTypeMG">服务类型：</li>
				<li class="list-group-item" id="cusNameMG">服务客户：</li>
				<li class="list-group-item" id="cusTelMG">联系电话：</li>
				<li class="list-group-item" id="serviceContentMG">服务内容：</li>
				<li class="list-group-item" id="remarksMG">备注：</li>
				</ul>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div> 
	<!--**************************************************************************边界线*********************************************************************************************-->
	</div>	
</body>
<script type="text/javascript">
/******************************************************************************存留模态框中的原始数据(大概不能协调)************************************************************************************/
/* $(document).ready(function(){
	 var name=$("#serviceNameMG").html();
	 var type=$("#serviceTypeMG").html();
	 var cusName=$("#cusNameMG").html();
	 var cusTel=$("#cusTelMG").html();
	 var content=$("#serviceContentMG").html();
	 var remarks=$("#remarksMG").html(); 
 })  */
/************************************************************************查询正式表格展示***************************************************************************************/
$(document).ready(function(){ 
	conTable.search(1);
}) 
var conTable=new Vue({
	el:"#conTable",
	data:{
		home:''
	},
	methods:{
		search:function(currentPage){
			var _self = this;
			 $.ajax({
				url:'../heyunService/select',
				type : 'post',
				dataType : 'json',
				data:{'currentPage':currentPage,'state':'已提交'},
				success:function(data){
					 _self.home=data.heyunServiceList;
					laypage({					     
						  cont: $("#clear"),  //定义分页显示的容器
						  pages:data.totalPage,  //从后台查询得到总页数
						  curr:currentPage,     
						  skin: 'molv', 
						  skip:true, 
						  last:'末页',
						  groups:3,  
						  jump: function(obj, first){ 
						  console.log("==========================");							
						    if(!first){   
						    	conTable.search(obj.curr);
						    }
						  } 
					 });  
				 }
			})	
		},
			search2:function(currentPage){
				var _self = this;
				$.ajax({
					url:'../heyunService/select',
					type : 'post',
					dataType : 'json',
					data:$("#selectF form").serialize()+'&currentPage='+currentPage,
					success:function(data){
						_self.home=data.heyunServiceList;
						console.log(data.heyunServiceList);
						
						laypage({					     
							  cont: $("#clear"),  //定义分页显示的容器
							  pages:data.totalPage,  //从后台查询得到总页数
							  curr:currentPage,
							  
							  skin: 'molv', 
							  skip:true, 
							  last:'末页',
							  groups:3,  
							  jump: function(obj, first){ 
							  console.log("==========================");							
							    if(!first){   
							    	conTable.search2(obj.curr);
							    	
							    }
							  }
						 });
					 }
				})	
			
		}
	}
})
/********************************************************************************************预分配**********************************************************************************************/
 $(document).on("click",".updateB",function(){ 
	var serviceId=$(this).attr("update_id");
	 $("#updateMB").attr("serviceId",serviceId);
	 /*$("#serviceNameMU").html(name);
	$("#serviceTypeMU").html(type);
	$("#cusNameMU").html(cusName);
	$("#cusTelMU").html(cusTel);
	$("#serviceContentMU").html(content);
	$("#remarksMU").html(remarks); */
	$.ajax({
		url:'../heyunService/select',
		type:"post",
		dataType:'json',
		data:{'serviceId':serviceId,'currentPage':1},
		success:function(result){
			var resultT=result.heyunServiceList[0];
			console.log("iiiiiii");
			$("#serviceNameMU").html('服务名称：'+resultT.serviceName);
			$("#serviceTypeMU").html('服务类型：'+resultT.serviceType);
			$("#cusNameMU").html('服务客户：'+resultT.heyunCustomer.cusName);
			$("#cusTelMU").html('联系电话：'+resultT.heyunCustomer.cusTel);
			$("#serviceContentMU").html('服务内容：'+resultT.serviceContent);
			$("#remarksMU").html('备注：'+resultT.remarks);
			}
	  })
	  $.ajax({
		  url:'../heyunEmp/select',
			type:"post",
			dataType:'json',
			success:function(result){
				updateM.emp=result;
				console.log(result);
			}
	  })
})
var updateM=new Vue({
		el : '#updateM',
		data:{
			cus:'',
			emp:'',
			home2:''
		},
		methods:{
					}
}) 
/****************************************************************************************正式分配****************************************************************************************************************/
 $(document).on("click","#updateMB",function(){ 
	 $("#updateM").modal("hide");
	 $.ajax({
		  url:'../heyunService/update?serviceId='+ $(this).attr("serviceId"),
			type:"post",
			dataType:'json',
			data:$("#updateM form").serialize()+'&state=已分配',//此id为司的id
			success:function(result){
				console.log(result+'ssss');
				conTable.search(1);
			}
	  })
 })
 /******************************************************************************预查看（只需模态框，没有正式，来了数据就不再回去了）************************************************************************************/
$(document).on("click",".getB",function(){ 
	var serviceId=$(this).attr("get_id");
	/* $("#serviceNameMG").html(name);
	$("#serviceTypeMG").html(type);
	$("#cusNameMG").html(cusName);
	$("#cusTelMG").html(cusTel);
	$("#serviceContentMG").html(content);
	$("#remarksMG").html(remarks); */
	$.ajax({
		url:'../heyunService/select',
		type:"post",
		dataType:'json',
		data:{'serviceId':serviceId,'currentPage':1},
		success:function(result){
			var resultT=result.heyunServiceList[0];
			$("#serviceNameMG").html('服务名称：'+resultT.serviceName);
			$("#serviceTypeMG").html('服务类型：'+resultT.serviceType);
			$("#cusNameMG").html('服务客户：'+resultT.heyunCustomer.cusName);
			$("#cusTelMG").html('联系电话：'+resultT.heyunCustomer.cusTel);
			$("#serviceContentMG").html('服务内容：'+resultT.serviceContent);
			$("#remarksMG").html('备注：'+resultT.remarks);
			}
	  })
})
/****************************************************************************************全局查询****************************************************************************************************************/
$("#selectA").click(function(){
	 conTable.search2(1);
})
</script>
</html>